<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间:{{ photoinfo.add_time | dtFormat}}</span> 
            <span>点击:{{ photoinfo.click }}次</span>
        </p>
        <hr>
        <vue-preview :slides="slide1"></vue-preview>
        <!-- 内容 -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 评论组件 需传入图片ID -->
        <comment :id="id" ></comment>
    </div>
</template>

<script>
// 导入评论组件
import comment from "@/components/subcomponents/comment";
export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfo: {},
      slide1: []
    };
  },
  created() {
    this.getPhotoInfo();
    this.getThumimages();
  },
  methods: {
    async getPhotoInfo() {
      const { data: res } = await this.$http.get(
        "/api/getimageinfo/" + this.id
      );
      if (res.status != 0) return Toast("获取图片详情失败");
      this.photoinfo = res.message[0];
    },
    async getThumimages() {
      const { data: res } = await this.$http.get(
        "/api/getthumimages/" + this.id
      );

      console.log(res);
      if (res.status != 0) return Toast("获取缩略图失败!");
      this.slide1 = res.message;
      this.slide1.forEach((item, i) => {
        item.msrc = item.src;
        item.w = 600;
        item.h = 400;
        item.title = "第" + ++i + "张";
      });
    }
  },
  // 注册评论组件
  components: {
    comment
  }
};
</script>

<style lang="scss" scoped>
.photoinfo-container {
  h3 {
    font-size: 16px;
    text-align: center;
    color: #0094ff;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
  }
  .content {
    padding: 5px;
    font-size: 14px;
    text-indent: 2em;
  }
  figure {
    img {
      width: 100px;
    }
  }
}
/deep/ .my-gallery{
  position: relative;
  overflow: hidden;
  figure {
    margin: 0;
  }
  img {
    float: left;
    width: 30%;
    margin: 5px;
  }
}
</style>
